let w = null;

class Watcher {
    constructor(obj,key){
        this.obj=obj;
        this.obj=key;

        w=this;
        w = null;
    }

    get () {
        return this.obj[this.key]
    }

    update(){
        console.log(
            "gogogo,有人通知我了,我重新去请求数据是:" +
              this.get() +
              ",然后开始重新渲染视图!!!!"
          ); 
    }
}

class Dep {
    constructor(){
        this.subs=[]
    }
    depend(Watcher) {
        this.subs.push(Watcher);
        console.log(
          "每次访问我的数据的时候,我就把watcher收集到dep.subs这个数组中",
          this.subs
        ); 
    }
    notify(){
        console.log("通知所有的watcher 重新加载新的数据");
        this.subs.forEach((watcher) => {
          watcher.update();
        });
    }
}
function defineReactive(_data, key, value) {

    observe(value);

    const dep = new Dep();
    Object.defineProperty(_data, key, {
        get() {
            console.log("正在获取" + key + "的值");
            if (w) {
                dep.depend(W);
            }
            return value;
        },
        set(newVal) {
            if (newVal === value) return;

            console.log("正在设置" + key + "的值");
            value = newVal;
            dep.notify();
        }
    })
}
     class Observe {
    constructor(_data) {
        this._data = _data;
        if (Array.isArray(_data)) {
            this.observeArray(_data)
        } else {
            this.walk(_data)
        }
    }

    observeArray(_data){
        _data.forEach(()=>{
            observe(item)
        })
    }

    walk(_data){
    for(let key of Object.keys(_data)){
        defineReactive(_data, key, _data[key]);
    }
}
}
function observe(_data) {
    if (typeof _data !== "object" || _data === null) return;
    new Observer(_data)
}



function Vue(options) {
    this._data = options.data;

    for (let key of Object.keys(this._data)) {
        Object.defineProperty(this, key, {
            get() {
                return this._data[key]
            },
            set(newVal) {
                this._data[key] = newVal
            }
        })
    }
    //拿到_data的数据开始进行响应式操作，我们首先把响应式操作的代码放在observe函数中
    observe(this._data);
}

const vm = new Vue({
    data: {
        count: 1,
        course: {
            type: 'easy',
            name: 'vue'
        }
    }
})
console.log(vm);

function huoqu() {
    console.log(vm.count);
}

function shezhi() {
    vm.count++;
}

// huoqu();
shezhi();
